<template>
	<div class="most-expected">
		<p class="title" v-if="mostlist.length>0">近期最受期待</p>
		<div class="most-expected-list" v-if="mostlist.length>0">
			<router-link :to="`/moviepage/${item.id}`" class="expected-item" v-for="item in mostlist" :key="item.id">
				<div class="poster">
					<img :src="$options.filters.src(item.img)" :alt="item.nm">
					<span class="wish">
						<span class="wish-num">{{item.wish}}</span>
						人想看
					</span>
					<div class="toggle-wish"><span></span></div>
				</div>

				<h5 class="name">{{item.nm}}</h5>

				<p class="date">{{item.comingTitle}}</p>
			</router-link>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				mostlist: [],
			}
		},
		created() {
			this.getExpectedList()
		},
		mounted() {

		},
		methods: {
			async getExpectedList() {
				let re = await this.$axios.get('index/mostExpected?ci=20&limit=30&offset=0')
				// console.log(re)
				this.mostlist = re.coming
				// console.log(this.mostlist)
			}
		},
		filters: {
			src(value) {
				return value.replace('w.h', '100.138')
			}
		},
	}
</script>

<style scoped="scoped" lang="less">
	.most-expected {
		padding: 12px 15px;
		background-color: #fff;
		margin-bottom: 10px;

		.title {
			font-size: 14px;
			color: #333;
			margin: 0 0 12px;
		}
	}

	.most-expected-list {
		overflow: scroll;
		white-space: nowrap;
	}

	.expected-item {
		display: inline-block;
		width: 85px;
		overflow: hidden;
		margin-right: 10px;

		.poster {
			width: 85px;
			height: 115px;
			position: relative;
			margin-bottom: 6px;
			background-color: #E1E1E1;
			background-size: 100% 100%;

			img {
				width: 100%;
				height: 100%;
			}

			.wish {
				position: absolute;
				left: 4px;
				bottom: 2px;
				color: #faaf00;
				font-size: 11px;
				font-weight: 600;

				span {
					font-size: 11px;
					font-weight: 600px;
				}
			}

			.toggle-wish {
				width: 28px;
				line-height: 28px;
				background: rgba(61, 63, 71, .6);
				text-align: center;
				border-bottom-right-radius: 10px;
				position: absolute;
				top: 0;
				left: 0;

				span {
					display: inline-block;
					width: 10px;
					height: 10px;
					background-size: 100%;
					background-repeat: no-repeat;
					background-image: url(../assets/img/notWish.png);


				}
			}
		}

		.name {
			font-size: 13px;
			color: #222;
			margin: 0 0 3px;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.date {
			margin: 0;
			font-size: 12px;
			color: #999;
		}

	}

	.most-expected::-webkit-scrollbar {
		width: 0;
	}
</style>
